<template>
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>

		<view class="container">
			<view class="container-box">
				<view class="input-box">
					<view class="text-tips">请上传3-5张脸部照片<text v-if="numlist.type == 0 || numlist.type == 3" style="font-size: 24rpx;font-weight: normal;letter-spacing: 0rpx;color: #666666;">({{numlist.name}})</text></view>
				</view>
				<view class="">
					<sunui-upimg @change="getImageInfo2" :upload_auto="true" :url="urlimg" ref="upimg2" :upimg_preview="serviceArr2" :upload_count="5"></sunui-upimg>
					<!-- <sunuiUpimg :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunuiUpimg> -->
				</view>
				
			</view>
			<view class="tips" v-if="(!numlist.face_img || !numlist.face_img[0]) && numlist.face_img_status == 1">
				上次保存的照片已成功同步至设备中，为保护您的个人信息，上传设备成功后删除了照片信息，如需更换照片，重新上传即可。
			</view>
			<view v-if="(numlist.face_img && numlist.face_img[0]) || numlist.face_img_status != 0">
				<view class="tips" v-if="numlist.face_img_status == 0">
					上次保存的照片正在同步至设备中，请稍等
				</view>
				<view class="tips" v-if="numlist.face_img_status == 1">
					上次保存的照片已成功同步至设备
				</view>
				<view class="tips" v-if="numlist.face_img_status == 2">
					上次保存的照片同步失败。原因：{{numlist.face_img_reason}}
				</view>
				<view class="btn-box" v-if="numlist.is_new_face">
					<button type="primary" class="btn1" @tap="goreset">刷新页面</button>
				</view>
				<view class="btn-box" v-if="!numlist.is_new_face && numlist.face_img_status == 0">
					<button type="primary" class="btn1" @tap="goresync">重新同步</button>
				</view>
			</view>

		</view>
		<view class="title">注意事项</view>
		<view class="text-box">
			<view class="text1">1.为提高人脸识别的速度，请尽量正脸面对手机进行拍照</view>
			<view class="text1">2.为保证人脸识别的真实性，添加图片时只能相机拍照上传</view>
			<view class="text1">3.不同手机型号上传方式可能会不同</view>
			<view class="text1">4.当照片成功同步至设备后，会自动删除服务器存储的照片</view>
			<view class="tips-box">
				<view class="tips-boxs">
					<view class="tips-icon">
						<image src="../../../static/images/selfie1.png" class="tips-img"></image>
					</view>
					<view class="text2">正对手机</view>
				</view>
				<view class="tips-boxs">
					<view class="tips-icon">
						<image src="../../../static/images/selfie3.png" class="tips-img"></image>
					</view>
					<view class="text2">光线充足</view>
				</view>
				<view class="tips-boxs">
					<view class="tips-icon">
						<image src="../../../static/images/selfie2.png" class="tips-img"></image>
					</view>
					<view class="text2">放慢动作</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="primary" :style="btn_style" class="btn-pry" @tap="uPublishTap">保存</button>
		</view>
	</view>
</template>

<script>
	// import sunuiUpimg from "../../../appComponent/uni/sunui-upimg/sunui-upimg-basic.vue" //老版上传
	import sunuiUpimg from "../component/sunui-upimg/sunui-upimg.vue" //新版上传
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getBindface = () => {
		common.post('HouseApi&a=face_img_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			add_pigcms_id: _this.add_pigcms_id
		}, data => {
			console.log('++++', data)
			_this.numlist = data;
			_this.serviceArr2 = data.face_img.map(item =>{
				let arr = {};
				arr['path'] = item.face_img_url;
				return arr
			})
			console.log("tttttttttt",_this.serviceArr2)
			_this.basicArr = _this.serviceArr2.map(item=>{
				return item.path
			})
			console.log("7777777777777",_this.basicArr)
			if (data.is_rdirect) {
				uni.redirectTo({
					url: './selectBindFace'
				});
			}
		});
	};
	const getresync = () => {
		common.post('HouseApi&a=face_img_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			add_pigcms_id: _this.add_pigcms_id
		}, data => {
			console.log('++++', data)
		});
	};
	export default {
		data() {
			return {
				urlimg: common.requestDomain + 'appapi.php?g=Appapi&c=HouseApi&a=ajax_face_img',
				serviceArr2: [],
				userInfo: {
					avatar: '../../../static/images/return-top.png',
					nickname: '昵称'
				},
				aricle_title: '',
				basicArr: [],
				numlist: {},
				listData: {},
				fab_content: [],
				fab_pattern: {},
				imglength: 0,
				imgnum: 8,
				type: 0,
				title: '',
				btncolor: '',
				btn_style: '',
				cat_id: 0,
				village_id: 0,
				pigcms_id: 0,
				user_options: {},
				page_from: '',
				add_pigcms_id: 0,
			};
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif

			if (!app.globalData.is_login) {
				_this.user_options = {
					toLogin: true
				};
			}
		},
		onLoad: function(options) {
			_this = this;
			console.log("报修类型", options.type)
			_this.type = options.type;
			_this.add_pigcms_id = options.add_pigcms_id;
			console.log("lllllll", _this.add_pigcms_id)

			if (options.from) {
				_this.page_from = options.from;
			}
			
			if (!options.add_pigcms_id) {
				uni.redirectTo({
					url: './selectBindFace'
				});
				return false;
			}
			
			common.setMainColor(_this, function(config) {
				_this.btncolor = app.globalData.config.config.mobile_head_color;
				_this.btn_style = 'background-color: ' + _this.btncolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.btncolor + ';';
			});
			uni.setNavigationBarTitle({
				title: "人脸识别门禁"
			});

			if (app.globalData.userInfo) {
				_this.userInfo.avatar = app.globalData.userInfo.avatar;
				_this.userInfo.nickname = app.globalData.userInfo.nickname;
				console.log('_this.userInfo', _this.userInfo);
			}

			var res = uni.getStorageSync("village_key");
			_this.village_id = res.village_id;
			_this.pigcms_id = res.pigcms_id;
			
			_this.$nextTick(function(){
				_this.getInfo();
			})
		},
		mounted() {

		},
		components: {
			sunuiUpimg
		},
		methods: {
			async getInfo() {
				await getBindface()
			},
			getImageInfo2(e) {
				// _this.basicArr = e.map(item=>{
				// 	return item.result.imageUrl_path
				// })
				_this.basicArr = e.map(item=>{
					return item.path
				})
				console.log("图片返回777777",_this.basicArr)
				console.log('图片返回1：', e)
			},
			goreset() {
				getBindface()
			},
			goresync() {
				getresync()
			},
			getLocation_msg(res) {
				console.log('反馈信息：', res);
				_this.address = res.name;
			},
			tapChange(e) {
				console.log(e.cat_id)
				_this.cat_id = e.cat_id;
			},

			uPublishTap() {
				// if(!_this.aricle_title || _this.aricle_title == ''){
				// 	uni.showModal({
				// 		title: common.changeTxt('提示'),
				// 		content: common.changeTxt('您需要输入一些文字才能上报'),
				// 		showCancel: false,
				// 		confirmText: common.changeTxt('好的'),
				// 		success: function(res) {

				// 		}
				// 	})
				// 	return false;
				// }
				var postData = {
					village_id: _this.village_id,
					pigcms_id: _this.pigcms_id,
					add_pigcms_id: _this.add_pigcms_id,
					face_img: _this.basicArr,
				};
				console.log('_this.basicArr.postData', postData);

				common.post('HouseApi&a=face_img_add', postData, data => {
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('上传成功'),
						showCancel: false,
						confirmText: common.changeTxt('好的'),
						success: function(res) {
							if (res.confirm) {
									getBindface()
							}
						}
					});
				});
			},
			// // 删除图片 -2019/05/12(本地图片进行删除)
			// async delImgInfo(e) {
			// 	console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
			// 	_this.imglength = _this.imglength - 1;
			// 	_this.imgnum = _this.imgnum + 1
			// },
			// // 基础版
			// async upBasicData(e) {
			// 	console.log('===>', e);
			// 	// 上传图片数组
			// 	let arrImg = [];
			// 	for (let i = 0, len = e.length; i < len; i++) {
			// 		try {
			// 			if (e[i].path_server != "") {
			// 				await arrImg.push(e[i].path_server);
			// 			}
			// 		} catch (err) {
			// 			console.log('上传失败...');
			// 		}
			// 	}
			// 	// 图片信息保存到data数组
			// 	this.basicArr = arrImg;
			// 	_this.imglength = this.basicArr.length;
			// 	_this.imgnum = _this.imgnum - 1;
			// 	// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
			// 	if (arrImg.length == this.upImgBasic.count) {
			// 		uni.showToast({
			// 			title: `上传成功`,
			// 			icon: 'none'
			// 		});
			// 	}
			// },
			// trigger(param) {
			// 	var url = param.item.pagePath;
			// 	if (_this.village_id) {
			// 		url = common.changeURLArg(url, 'village_id', _this.village_id);
			// 	}
			// 	if (_this.pigcms_id) {
			// 		url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
			// 	}
			// 	console.log('tabbar url', url);
			// 	common.parseUrl(url, '', false, param.item.text);
			// },
		}
	}
</script>

<style>
	.container {
		margin: 0px;
		background: #FFFFFF;
		overflow: hidden;
		padding-bottom: 30rpx;
	}

	.container-box {
		background: #FFFFFF;
		padding: 27rpx;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.info-icon {
		width: 78rpx;
		height: 78rpx;
	}

	.info-img {
		width: 100%;
		height: 100%;
	}

	.name {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 78rpx;
		padding-left: 18rpx;
	}

	.input-box {
		margin-top: 0rpx;
	}

	.input-btn {
		height: 200rpx;
		width: 100%;
	}

	.banner {
		background: #FFFFFF;
		overflow: hidden;
		padding-left: 27rpx;
		margin-top: 15rpx;
	}

	.assort {
		background: #FFFFFF;
		margin-top: 15rpx;
		padding: 18rpx 0;
	}

	.cat_text {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 60rpx;
	}

	.assort-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.opt {
		background: #FFFFFF;
	}

	.opt-assort {
		height: 65rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 33rpx;
		padding: 0 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 65rpx;
		margin: 15rpx 0rpx 15rpx 27rpx;
	}

	.address {
		margin-left: 0rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		border: 2rpx solid rgba(209, 209, 209, 1);
		border-radius: 30rpx;
		display: inline-block;
	}

	.address-text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(204, 204, 204, 1);
		line-height: 40rpx;
		padding: 8rpx 20rpx 8rpx 10rpx;
	}

	.address-text:before {
		content: "";
		width: 45rpx;
		height: 45rpx;
		background: url(../../../static/images/dingwei.png) no-repeat;
		background-size: cover;
		display: block;
		float: left;
	}

	.address-text.has {
		color: black;
	}

	.btn {
		margin: 74rpx 0rpx;
		height: 100%;
		width: 100%;
	}

	.btn-pry {
		width: 550rpx;
		height: 98rpx;
		background: #2681f3;
		border-radius: 49rpx;
		line-height: 98rpx;
		margin-top: 150rpx;
	}

	.content-class {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.tips {
		margin: 0rpx 27rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 35rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.text-tips {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	/deep/ .sunsin_picture_list {
		padding: 0rpx;
	}

	.title {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #666666;
		margin-left: 27rpx;
	}

	.text-box {
		padding: 27rpx;
		background: #FFFFFF;
	}

	.text1 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.tips-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.tips-img {
		width: 100%;
		height: 100%;
	}

	.tips-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0rpx 30rpx;
	}

	.tips-boxs {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.text2 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #666666;
	}

	.btn-box {
		/* width: 100%; */
		margin-right: 30rpx;
	}

	.btn1 {
		width: 160rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		line-height: 50rpx;
		float: right;
	}
</style>
